<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app" draggable="true" style="position:relative; width: 400px; height: 400px; background: red">
    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
      This div is draggable
    </div>
    <div id="drag" draggable="true" data-index="1" style="position:absolute; border: 1px solid #000; cursor: grab;">
      你可以拖拽我</div>
  </div>
  <script>
    const odrag = document.querySelector("#drag");
    const oapp = document.querySelector("#app");
    odrag.addEventListener('dragstart', handleDragstart.bind(this), false);
    oapp.addEventListener('drop', handleDrop.bind(this), false)
    oapp.addEventListener('dragover', handleDragOver.bind(this), false)
    function handleDragstart(e) {
      e.dataTransfer.setData('index', e.target.dataset.index)
    }
    function handleDrop(e) {
      e.preventDefault()
      e.stopPropagation()
      const odragClone = odrag.cloneNode(true);
      odragClone.style.top = e.offsetY + 'px';
      odragClone.style.left = e.offsetX + 'px';
      oapp.appendChild(odragClone)
    }
    function handleDragOver(e) {
      // console.log(e)
      e.preventDefault()
      e.stopPropagation()
    }



    Object.defineProperty(window, "b", {
      set(nVal) {
        console.log('b变了')
      }
    })
    function foo() {
      let obj = {};
      Object.defineProperty(obj, "a", {
        set(nVal) {
          console.log(obj)
          console.log('a变了')
        }
      })
      obj.a = obj = { c: 2 }
      console.log(obj)
    }
    foo();
  </script>
</body>

</html>